<template>
	<div class="ivu-box">
		<Breadcrumb>
			<BreadcrumbItem>机器组管理</BreadcrumbItem>
			<BreadcrumbItem>机器组列表</BreadcrumbItem>
		</Breadcrumb>

		<Form ref="formInline" :model="request" inline >
			<FormItem>
				<Input type="text" v-model="request.name" clearable placeholder="请输入机器组" />
			</FormItem>
			<FormItem>
				<Button type="primary" @click="search"  style="margin-right: 10px">搜索</Button>
			</FormItem>
		</Form>
		
		
		<div class="form_box">
			<Table :columns="columns1" :data="tableData" >
				<template slot-scope="{ row }" slot="status" >
						<Tag color="success" type="border" v-if="row.status == 1">启用</Tag>
						<Tag color="error" type="border" v-if="row.status == 2">禁用</Tag>
				</template>
				
				
				<template slot-scope="{ row }" slot="device">
					<div v-for="(item,index) in row.device">{{item.device_name}}</div>
				</template>
			</Table>
			
		</div>
		
		<div style="display: flex;justify-content: center;margin-top: 24px;">
			<Page :total="page.count" :page-size="20" :page-size-opts="[20,30,40,50,100]" show-elevator show-sizer
				show-total @on-change="handleCurrentChange" @on-page-size-change="handleSizeChange" />
		</div>

	



	</div>
</template>

<script>
	export default {
		data() {
			return {
				width: this.$store.state.width,
				height: this.$store.state.height,
				showDel: false, //批量删除
				type:1,//1admin 2manager 3operator
				loading: false,
				request: {
					name:'',
					page: 1
				},
				codeImg: '',
				modal2: false,
				modal3: false,
				columns1: [

					{
						title: "机器组",
						key: "name",
						minWidth: 150,
						align: "center"
					},
					{
						title: "机器",
						slot: "device",
						minWidth: 150,
						align: "center"
					},

					{
						title: "状态",
						slot: "status",
						minWidth: 150,
						align: "center"
					},
					{
						title: "创建时间",
						key: "create_time",
						minWidth: 150,
						align: "center"
					}

			
				],
				tableData: [],
				page: {},
				modalLoading: true,
				modal1: false,
				form: {
					id: "",
					role_name: "",
					// password: "",
					real_name: "",
					phone: "",
					super: '',
					role_id: ''
				},
	
		

			};
		},
		mounted() {
			
			console.log(this.$route.query)
			
			if(this.$route.query.name){
				this.request.username = this.$route.query.name
			}
			if(this.$route.query.type){
				this.type = this.$route.query.type
			}
			
			
			this.lists();
		},
		methods: {


			search() {
				this.request.page = 1;
				this.lists();
			},
			handleSizeChange(val) {
				this.request.page = 1;
				this.request.pagerows = val;
				this.lists();
			},
			handleCurrentChange(val) {
				this.request.page = val;
				this.lists();
			},
			lists() {
				this.loading = true;
				this.axios.post("manager/operatorDeviceGroup", this.request).then(res => {
					if (res.code == 1) {
						this.loading = false;
						this.tableData = res.data.list;
						this.page.count = res.data.count; // 总条数
						this.page.curPage = res.data.curPage; // 当前页
						this.page.countPage = res.data.countPage; // 总页数
					}
				});
				

			},

		}
	};
</script>

<style scoped>
	.spec_item {
		display: flex;
		align-items: center;
		margin-bottom: 10px;
	}

	.spec_item .input {
		width: 200px;
	}

	.spec_item button {
		margin-left: 10px;
	}
</style>
